 .documents {
  position: relative;
  padding: 5px;
 }

 .mask {
  display: flex;
  position: absolute;
  background: rgba(131, 151, 160, 0.63);
  color: #ffffff;
  opacity: 0;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  pointer-events:none;
  transition: 0.5s;
}

.mask .icon {
  width: 24px;
  height: 24px;
  margin: 3% 0px 0px 5%;
  justify-content: left;
  cursor: 'default';
  opacity: 0.6;
}

.documents:hover .mask {
  opacity: 0.6;
}

.documents.active .mask {
  opacity: 0.6;
}

.documents.active .mask .icon {
  opacity: 1;
}

div ul li:hover {
  background: #ffffff;
}